<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11-表单组件</title>
    <script src="../js/vue.js"></script>
    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
</head>
<body>
<!--1. 准备一个容器-->
<div id="app">
    <!--添加按钮-->
    <el-button icon="el-icon-plus" type="primary" @click="fun" >添加用户</el-button>
    <el-dialog :visible.sync="flag" title="添加用户信息">
        <el-form>
            <!--添加每一组表单-->
            <el-form-item label="用户" label-width="70px">
                <el-input prefix-icon="el-icon-user" placeholder="请输入用户名" name="name" v-model="adduser.name"></el-input>
            </el-form-item>

            <el-form-item label="年龄" label-width="70px">
                <el-input-number :min="0" :max="120" name="age" v-model="adduser.age"></el-input-number>
            </el-form-item>

            <el-form-item label="性别" label-width="70px">
                <el-radio-group v-model="adduser.sex" name="sex">
                    <el-radio label="1">男</el-radio>
                    <el-radio label="0">女</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="生日" label-width="70px">
                <el-date-picker type="datetime" name="birthday" v-model="adduser.birthday"></el-date-picker>
            </el-form-item>

            <el-form-item label="地址" label-width="70px">
                <el-input prefix-icon="el-icon-location" name="address" v-model="adduser.address" placeholder="请输入地址"></el-input>
            </el-form-item>

            <el-form-item label="爱好" label-width="70px">
                <el-checkbox-group name="hobby" v-model="adduser.hobby">
                    <el-checkbox label="1">抽烟</el-checkbox>
                    <el-checkbox label="2">喝酒</el-checkbox>
                    <el-checkbox label="3">吃槟榔</el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <el-form-item label="职业" label-width="70px">
                <el-select name="job" v-model="adduser.job">
                    <el-option label="程序员" value="1"></el-option>
                    <el-option label="工程师" value="2"></el-option>
                    <el-option label="码农" value="3"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="婚姻" label-width="70px">
                <el-switch inactive-text="未婚" active-text="已婚" name="matrity" v-model="adduser.matrity"></el-switch>
            </el-form-item>

            <el-form-item>
                <el-row type="flex" justify="center">
                    <el-col :span="4">
                        <el-button icon="el-icon-check" type="success">确认</el-button>
                    </el-col>
                    <el-col :span="4">
                        <el-button icon="el-icon-close" type="danger">取消</el-button>
                    </el-col>
                </el-row>


            </el-form-item>

        </el-form>
    </el-dialog>

    <el-button icon="el-icon-plus" type="primary" @click="fun1" >用户注册</el-button>
    <el-dialog :visible.sync="flag1" title="用户注册" @close="resetform">
        <el-form v-bind:model="registerUser" v-bind:rules="ruleReg" ref="formData">
            <!--用户名-->
            <el-form-item label="用户名" label-width="70px" prop="uName">
                <el-input name="uName" prefix-icon="el-icon-user" placeholder="请输入用户名" v-model="registerUser.uName"></el-input>
            </el-form-item>

            <!--性别-->
            <el-form-item label="性别" label-width="70px">
                <el-radio-group name="sex" v-model="registerUser.sex">
                    <el-radio label="1">男</el-radio>
                    <el-radio label="0">女</el-radio>
                </el-radio-group>
            </el-form-item>

            <!--职业-->
            <el-form-item label="职业" label-width="70px">
                <el-select name="job" clearable multiple v-model="registerUser.job">
                    <el-option label="程序猿" value="1"></el-option>
                    <el-option label="攻城狮" value="2"></el-option>
                    <el-option label="码农" value="3"></el-option>
                </el-select>
            </el-form-item>

            <!--电话-->
            <el-form-item label="电话" label-width="70px" prop="phone">
                <el-input prefix-icon="el-icon-phone" name="phone" v-model="registerUser.phone" placeholder="请输入电话号码"></el-input>
            </el-form-item>

            <!--地址-->
            <el-form-item label="地址" label-width="70px" prop="address">
                <el-input name="address" prefix-icon="el-icon-location" v-model="registerUser.address" placeholder="请输入地址"></el-input>
            </el-form-item>

            <!--按钮-->
            <el-form-item>
                <el-row type="flex" justify="center">
                    <el-col :span="4">
                        <el-button  prefix-icon="el-icon-check" type="success" @click="confirm">确定</el-button>
                    </el-col>
                    <el-col :span="4">
                        <el-button prefix-icon="el-icon-close" type="danger" @click="resetform">取消</el-button>
                    </el-col>
                </el-row>

            </el-form-item>
        </el-form>
    </el-dialog>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            flag:false,
            adduser:{
                name:undefined,
                age:0,
                sex:"",
                birthday:undefined,
                address:undefined,
                hobby:["1"],
                matrity:false,
                job:"1",
            },
            flag1:false,
            registerUser:{
                uName:undefined,
                sex:"1",
                job:"1",
                phone:undefined,
                address:undefined,
            },
            ruleReg:{
                uName:[
                    {required:true , message:"用户名不能为空" , trigger:"blur"},
                    {min:2,max:10,message: "用户名长度必须为2-10字符" , trigger:"blur"}
                ],
                phone:[
                    {required:true, message:"手机号不能为空",target:"blur"},
                    {min:11,max:11,message: "手机号必须为11位",target: "blur"}
                ],
                address:[
                    {min:2,max:60,message:"地址必须为2-60个字符",target:"blur"}
                ]
            }
        },
        methods: {
            fun:function () {
                this.flag = true;
            },
            fun1:function () {
                this.flag1=true;
            },
            confirm:function () {
                // 验证表单整体是否通过
                this.$refs["formData"].validate(flag=>{
                    if(flag){
                        //alert("校验通过");
                        this.$alert("校验通过")
                    }else{
                        this.$alert("校验不通过")
                        //alert("校验不通过")
                    }
                })
            },
            resetform:function () {
                this.$refs["formData"].resetFields();
            }

        },
    });
</script>

</body>
</html>